<template>
	<view class="fui-wrap" @click="blurPlate">
		<view class="container">
			<view class="youshi">
				<fui-text text="认证车牌的好处有" type="black" align="left" size="28" block fontWeight="800"></fui-text>
				<fui-text text="1、展示车辆全部出入记录。" type="black" align="left" size="28" block></fui-text>
				<fui-text text="2、展示我办理的月卡，储值卡，会员卡等记录。" type="black" align="left" size="28" block></fui-text>
				<fui-text text="3、车辆出入，月租到期，储值消费有微信通知提醒。" type="black" align="left" size="28" block></fui-text>
				<fui-text text="4、保护隐私，已经认证的车牌将不对外展示停车场，不对外展示出入记录。" type="black" align="left" size="28" block></fui-text>
			</view>
			<plateNumber ref="plateNumber" :is-form="true" :value="plate_number" :keyboard="false" @confirm="confirmPlate"></plateNumber>
			<view class="form-title">
				<fui-text text="请上传行驶证：" type="black" align="left" size="32" block></fui-text>
			</view>
			<view class="licence">
				<image v-if="file" @click="checkPhoto" :src="file" mode="heightFix"></image>
				<image v-else @click="checkPhoto" :src="`${baseUrl}assets/img/xingshizheng.png`" mode="heightFix"></image>
				<view style="display: flex;padding: 0 40rpx;margin-top: 30rpx;">
					<fui-icon name="info-fill" size="28" color="red"></fui-icon>
					<fui-text style="margin-left: 10rpx;" text="照片上传后将进行加密处理，审核完成后立即删除，请放心上传!" type="danger" align="left" size="24" block></fui-text>
				</view>
				<fui-icon v-if="file" @click="clearFile" name="clear-fill" color="red" style="position: absolute;right: 20rpx;top: 0rpx;"></fui-icon>
			</view>
			<view class="bottom" :style="`height: ${safebottom}rpx;`">
				<fui-button @click="postAdd" text="提交认证" :size="32"  height="80rpx"></fui-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import plateNumber from '@/components/common/plate.vue';
	export default {
		components:{
			plateNumber:plateNumber
		},
		data() {
			return {
				plate_number:'',
				baseUrl:baseUrl,
				file:'',
				fullurl:'',
				safebottom:0
			}
		},
		onLoad(e) {
			this.plate_number=e.plate_number || '';
			if(this.plate_number){
				uni.setNavigationBarTitle({
					title:'车牌认证'
				});
			}else{
				uni.setNavigationBarTitle({
					title:'添加并认证车牌'
				});
			}
			let that=this;
			uni.getSystemInfo({
			  success: function (info) {
				that.safebottom=info.safeAreaInsets.bottom+100;
			  }
			});
		},
		methods: {
			...methods,
			clearFile:function(){
				this.file='';
				this.fullurl='';
			},
			cancelPlate:function(){
				this.$navigateBack();
			},
			confirmPlate:function(plate_number){
				this.$refs.plateNumber.hideKeyboard();
				this.$refs.plateNumber.foucusText(-1);
				this.plate_number=plate_number;
			},
			blurPlate:function(){
				this.$refs.plateNumber.hideKeyboard();
				this.$refs.plateNumber.foucusText(-1);
				this.plate_number=this.$refs.plateNumber.getPlate();
			},
			postAdd:function(){
				if(!this.fullurl){
					this.$msg('请上传行驶证');
					return;
				}
				this.$post('index/bind',{plate_number:this.plate_number,fullurl:this.fullurl},true,true).then(res=>{
					this.$navigateBack();
				});
			},
			checkPhoto:function(){
				let that=this;
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					sourceType:['camera'],
					success:function(e){
						let file=e.tempFilePaths[0];
						that.$uploadFile(file,true).then(res=>{
							that.file=file;
							that.fullurl=res.fullurl;
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.fui-wrap{
	padding: 20rpx;
}
.container{
	background-color: #fff;
	padding-bottom: 30rpx;
	image{
		width: 100%;
	}
	.youshi{
		padding: 20rpx;
		background-color: #efc986;
	}
}
.form-title{
	margin: 30rpx 0;
	padding: 0 30rpx;
}
.licence{
	padding:30rpx;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	position: relative;
	image{
		height: 300rpx;
	}
}
.bottom{
	position: fixed;
	bottom: 0;
	width: 96%;
	left:2%;
}
</style>